<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col class="btns-text-list form-inline">
                        <form-rang-date-picker 
                            title="交易时间"
                            format="YYYY-MM-DD" 
                            size="small"
                            labelStyle=""
                            rightStyle="min-width: 150px; max-width: calc(410px + 0.25rem);"
                            class=""
                            @input="onRangeDateChange"
                            v-model="transactionTimeRangValue"
                         ></form-rang-date-picker>
                         <form-input title="订单号" labelStyle="" rightClass="myRightClass" class="ml-1 mb-2" :required="false" :value="postData.sourceOrderNo" @input="((value)=>{onPostChange('sourceOrderNo',value)})" ></form-input>
                         <div class="form-group">
                              <a-select placeholder="交易类型" size="small" :value="postData.transactionType"  style="width: 150px;" @change="((value)=>{onPostChange('transactionType',value)})" >
                                    <a-select-option value="">所有</a-select-option>
                                    <a-select-option value="Recharge">余额充值</a-select-option>
                                    <a-select-option value="Deduction">余额扣费</a-select-option>
                                    <a-select-option value="Deposit">保证金充值</a-select-option>
                                    <a-select-option value="DeDeposit">保证金扣费</a-select-option>
                              </a-select>
                        </div>

                         <div class="form-group"> 
                              <a-select placeholder="交易渠道" size="small"  :value="postData.transactionChannel"  style="width: 150px"  @change="((value)=>{onPostChange('transactionChannel',value)})">
                                    <a-select-option value="">所有</a-select-option>
                                    <a-select-option value="Balance">可用余额</a-select-option>
                                    <a-select-option value="Deposit">保证金</a-select-option>
                                    <a-select-option value="WeChat">微信</a-select-option>
                                    <a-select-option value="AliPay">支付宝</a-select-option>
                              </a-select>
                        </div>
                         <!-- <div>
                            <a-checkbox value="A">不显示0元费用</a-checkbox>
                        </div> -->
                         <div class="btns-text-dow">
                            <vertical-align-bottom-outlined />下载
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>
        <nly-content>
            <!-- 列表 -->
            <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 200}" :pagination="pagination"   @change="onTableChange" :loading="false">
                <div slot="transactionTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.transactionType" @change="onConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" value="">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" value="Recharge">
                        余额充值
                        </a-radio>
                        <a-radio :style="radioStyle" value="Deduction">
                        余额扣费
                        </a-radio>
                        <a-radio :style="radioStyle" value="Deposit">
                        保证金充值
                        </a-radio>
                        <a-radio :style="radioStyle" value="DeDeposit">
                        保证金扣费
                        </a-radio>
                    </a-radio-group>
                </div>
                <div slot="transactionChildTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.transactionChildType" @change="onConditionChange" style="flex-direction: column;">
                         <a-radio :style="radioStyle" value="">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" value="Re_Recharge">
                        现金
                        </a-radio>
                        <a-radio :style="radioStyle" value="De_Month">
                        保证金
                        </a-radio>
                    </a-radio-group>
                </div>
                <div slot="transactionChannelFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.transactionChannel" @change="onConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" value="">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" value="Balance">
                        可用余额
                        </a-radio>
                         <a-radio :style="radioStyle" value="Deposit">
                        保证金
                        </a-radio>
                        <a-radio :style="radioStyle" value="WeChat">
                        微信
                        </a-radio>
                        <a-radio :style="radioStyle" value="AliPay">
                        支付宝
                        </a-radio>
                    </a-radio-group>
                </div>
            </a-table>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { pageList} from "@/api/expenses/balanceChangeRecord";


export default {

    
    data () {
        const columns = [
            {
                align: "center",
                title: "流水号",
                dataIndex: "serialNum",
                width: 40,
            },
            {
                align: "left",
                title: "交易时间",
                dataIndex: "transactionTime",
                width: 120,
            },
             {
                align: "left",
                title: "交易类型",
                dataIndex: "transactionType",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case "Recharge":showText = "余额充值";break;
                        case "Deduction":showText = "余额扣费";break;
                        case "Deposit":showText = "保证金充值";break;
                        case "DeDeposit":showText = "保证金扣费";break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'transactionTypeFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            //  {
            //     align: "left",
            //     title: "资金形式",
            //     dataIndex: "transactionChildType",
            //     width: 100,
            //     customRender: (text, row, index) => {
            //         let showText = "";
            //         switch(text){
            //             case "Re_Recharge":showText = "现金";break;
            //             case "De_Month":showText = "保证金";break;
            //         }
            //         return showText;
            //     },
            //     scopedSlots: {
            //         filterDropdown: 'transactionChildTypeFilterDropdown',
            //         filterIcon: 'filterIcon',
            //     },
            // },
            {
                align: "left",
                title: "交易渠道",
                dataIndex: "transactionChannel",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case "Balance":showText = "余额";break;
                        case "Deposit":showText = "保证金";break;
                        case "WeChat":showText = "微信";break;
                        case "AliPay":showText = "支付宝";break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'transactionChannelFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
              {
                align: "left",
                title: "订单号",
                dataIndex: "sourceOrderNo",
                width: 120,
            },
            {
                align: "center",
                title: "入账(元)",
                dataIndex: "inAmount",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:green;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },
            {
                align: "center",
                title: "支出(元)",
                dataIndex: "outAmount",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:red;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },
             {
                align: "center",
                title: "可用余额",
                dataIndex: "afterChangeBalance",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:green;font-weight: 500;">{text}</span> : text;
                    return showText;
                },
            },
            {
                align: "center",
                title: "保证金余额",
                dataIndex: "afterChangeDeposit",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:green;font-weight: 500;">{text}</span> : text;
                    return showText;
                },
            },
             {
                align: "center",
                title: "备注",
                dataIndex: "remarks",
                width: 100,
            },
        ];
        return {
            transactionTimeRangValue:[],
            postData: {
                status:null,
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        };
    },
    created(){
        this.reLoadData();
    },
    activated(){
        this.reLoadData();
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
    },
    methods: {
        reLoadData(){
            this.pageList();
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
         userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        //获取列表
        pageList () {
            const { postData } = this;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
        onPostChange(column,value){
            console.log("查询条件发生变化",column,value);
            this.$set(this.postData,column,value);
            this.pageList();
        },
        onRangeDateChange(rangDateVal){
            // this.$emit("input", [this.localSelectValue, dateString]);
            const { postData } = this;
            console.log("收支明细时间范围：",rangDateVal);
            if(rangDateVal.length == 2 && rangDateVal[0]){
                postData.transactionTimeStart = rangDateVal[1][0];
                postData.transactionTimeEnd = rangDateVal[1][1] +" 23:59:59";
            }else{
                postData.transactionTimeStart = "";
                postData.transactionTimeEnd = "";
            }
            this.pageList();
        },
       

    }
};
</script>
<style lang="less" scoped>
/deep/.ant-select-sm .ant-select-selection--single{
    height: 28px;
}
.btns-text-list {
    display: flex;
    height:48px;
    line-height: 48px;
    margin-top: -7px;
    flex: 0 0 100%;
    max-width: 100%;
    div {
        padding: 0 10px
    }

    .btns-text-dow {
        position: absolute;
        right: 20px;
    }
}

</style>